<template>
  <div class="info_config_page">
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
      </h5>
      <el-button v-if="$hasMethod('#add')" size="small" icon="el-icon-plus" class="add-btn" @click="$router.push({ name: 'webConfigCategoryAdd', params: { type: 'info' } })">新添品类</el-button>
    </div>
    <el-table :data="tableData" row-key="id" border :tree-props="{ children: 'children' }">
      <el-table-column align="center" label="展开" width="80" />
      <el-table-column align="center" label="排序" width="80">
        <template slot-scope="scope">
          <!-- onkeyup="value=value.replace(/[^\d]/g,'')" -->
          <span v-if="!$hasMethod('#sort')">{{ scope.row.cate_sort }}</span>
          <el-input v-else v-model="scope.row.cate_sort" oninput="value=value.replace(/[^\d]/g,'')" maxlength="9" @change="changeSort(scope.row.id, scope.row.children, scope.row.cate_sort)" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="ID">
        <template slot-scope="scope">
          <span>{{ scope.row.children ? scope.row.id : scope.row.id.split('-')[1] }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="板块名称">
        <template slot-scope="scope">
          <p><span v-if="!scope.row.children" style="margin:0 5px 0 20px;">├─</span>{{ scope.row.children ? scope.row.cate_name : scope.row.name }}</p>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="180">
        <template slot-scope="scope">
          <el-tag v-if="$hasMethod('#enable')" class="pointer" :type="scope.row.status == 1 ? 'success' : 'danger'" @click="changeStatus(scope.row.id, scope.row.children)">{{ scope.row.status == 1 ? '显示' : '隐藏' }}</el-tag>
          <el-tag v-else :type="scope.row.status == 1 ? 'success' : 'danger'">{{ scope.row.status == 1 ? '显示' : '隐藏' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="280" fixed="right">
        <template slot-scope="scope">
          <el-button v-if="scope.row.children && $hasMethod('#relate')" size="mini" type="success" @click="$router.push({ name: 'webConfigCategoryAdd', params: { type: 'child', editId: scope.row.id } })">关联子品类
          </el-button>
          <el-button v-if="scope.row.children && $hasMethod('#edit')" size="mini" type="primary" @click="$router.push({ name: 'webConfigCategoryAdd', params: { type: 'info', editId: scope.row.id } })">编辑</el-button>
          <el-button v-if="$hasMethod('#delete')" size="mini" type="danger" @click="removeItem(scope.row.id, scope.row.children)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <custom-page ref="customPage" :total="total" @getList="getList" />
  </div>
</template>

<script>
import { getCategortList, sortCategory, editCategoryStatus, deleteCategory } from '@/api/web'
import customPage from '@/components/customPage'
export default {
  components: { customPage },
  data() {
    return {
      tableData: [],
      total: 0
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 列表项删除
    removeItem(id, level) {
      this.$confirm('您确定要删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        deleteCategory({
          cate_id: level ? id : id.split('-')[1],
          cate_level: level ? 1 : 2
        }).then(res => {
          this.getList()
        }).catch(() => { })
      })
    },
    // 更改显示隐藏状态
    changeStatus(id, level) {
      editCategoryStatus({
        cate_id: level ? id : id.split('-')[1],
        cate_level: level ? 1 : 2
      }).then(res => {
        this.getList()
      })
    },
    // 更改排序
    changeSort(id, level, val) {
      sortCategory({
        cate_id: level ? id : id.split('-')[1],
        cate_level: level ? 1 : 2,
        cate_sort: val
      }).then(res => {
        this.getList()
      })
    },
    // 获取列表
    getList() {
      const { page, pageSize } = this.$refs.customPage
      getCategortList({ page, pageSize }).then(res => {
        // console.log(res);
        this.tableData = res.data || []
        this.total = res.total
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
